<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form inline :model="searchParams" class="search-form-inline">
          <el-form-item label="仓库名称">
            <el-input
              v-model="searchParams.warehouseName"
              placeholder="仓库名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库状态">
            <el-select
              v-model="searchParams.status"
              placeholder="仓库状态"
              clearable
            >
              <el-option label="已启用" value="1"></el-option>
              <el-option label="已停用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <Table-header-warehouse/>
      <page-table
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          fixed
          show-overflow-tooltip
          width="120"
          prop="warehouseName"
          label="仓库名称">
          <template slot-scope="scope">
            <el-link type="primary" @click="showDialog(scope.row)">{{
              scope.row.warehouseName
              }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="仓库状态"
          prop="status"
          :formatter="statusFormatter"
        ></el-table-column>
        <el-table-column
          label="仓库地址"
          prop="address"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="创建时间"
          width="160"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
        ></el-table-column>
        <el-table-column
          :resizable="false"
          fixed="right"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="updateStatus(scope.row)"
            >{{ getStatus(scope.row.status, true) }}
            </el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              size="mini"
              type="danger"
              slot="reference"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </page-table>
    </div>
    <detail-dialog
      :title="dialogTitle"
      modal
      :show.sync="dialogShow"
      @save="save('warehouseForm')"
    >
      <el-form
        :model="warehouseForm"
        label-width="80px"
        ref="warehouseForm"
        :rules="rules"
      >
        <el-form-item label="仓库名称" prop="warehouseName">
          <el-input
            v-model="warehouseForm.warehouseName"
            placeholder="仓库名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库地址" prop="address">
          <el-input
            v-model="warehouseForm.address"
            placeholder="仓库地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="warehouseForm.remark"
            placeholder="备注"
          ></el-input>
        </el-form-item>
      </el-form>
    </detail-dialog>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import DetailDialog from '@/components/DetailDialog'
import TableHeaderWarehouse from './components/TableHeaderWarehouse'
import Mixins from './mixins'

export default {
  components: {SearchBar, PageTable, TableHeaderWarehouse, DetailDialog},
  mixins: [Mixins],
  data () {
    return {
      id: 'warehouse_manage',
      dialogShow: false,
      dialogTitle: '',
      warehouseForm: {},
      rules: {
        warehouseName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        address: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    showDialog (row) {
      this.dialogShow = true
      let title = '新建仓库'
      let data = {}
      if (row) {
        data = {...row}
        title = '编辑仓库-' + row.warehouseName
      }
      this.dialogTitle = title
      this.warehouseForm = data
    },
    save (formName) {
      if (this.checkFormData(formName)) {
        const data = this.warehouseForm
        data.updateTime = null
        this.requestOption(data.id && data.id !== null ? 'update' : 'add', data, (res) => {
          this.dialogShow = false
          this.initPageList()
        })
      }
    },
    updateStatus (row) {
      this.$msgBox.confirm(
        '确认' +
          this.getStatus(row.status, true) +
          '仓库-' +
          row.warehouseName +
          '?',
        () => {
          const updateStatus = row.status === 1 ? 0 : 1
          this.requestOption('update', {
            id: row.id,
            status: updateStatus
          }, (res) => {
            row.status = updateStatus
          })
        }
      )
    },
    statusFormatter (row, column, cellValue, index) {
      return this.getStatus(cellValue, false)
    },
    getStatus (cellValue, rs) {
      if (rs) {
        return cellValue === 1 ? '停用' : '启用'
      }
      return cellValue === 1 ? '已启用' : '已停用'
    },
    handleDelete (row) {
      this.$msgBox.confirm(
        '确认删除仓库-' + (row.warehouseName || '') + '?',
        () => {
          this.requestOption('delete', row.id, (res) => {
            this.initPageList()
          })
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-bar {
    text-align: center;
  }
</style>
